<template>
  <el-table
    :data="tableData"
    style="width: 50%; margin: 0 auto;">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.timer }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="文章标题"
      width="180">
      <template slot-scope="scope">
          {{scope.row.chapterTitle}}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="deleteChapter(scope.row.chapterId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        tableData: []
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      getList() {
        axios.get("http://localhost:3000/getlist").then(res => {
          if(res.status == 200) {
            this.tableData = res.data;
          }
        })
      },
      deleteChapter(id) {
        axios.post("http://localhost:3000/del", {
          id: id
        }).then(res => {
          if(res.data == "success") {
            let index = '';
            for(let i = 0; i < this.tableData.length; i++) {
              if(this.tableData[i].chapterId == id) {
                index = i;
              }
            }
            this.tableData.splice(index, 1);
          }
        })
      }
    },
    mounted() {
      this.getList();
    },
  }
</script>